/** 流程详情 */
import {Component, createRef} from "react";
import {Descriptions, Divider, Modal, Popover, Tag, Timeline} from "antd";

import {fmtDate, Handler} from "../../../../utils/util.tsx";
import {send, URL} from "../../../../utils/http.util.tsx";

import {Data, State} from "./types.tsx";

import LazyIcon from "../../Icon";
// @ts-ignore
import "./index.css"
import ImageDetail from "../Graph";

class InstanceDetail extends Component<
    {},
    State
> {
    imageDetailRef = createRef<ImageDetail>();

    state: State = {
        visible: false, imageVisible: false,
        data: null, imageData: undefined,
        taskList: null,
        loading: true
    }

    showInstanceDetail(data: Data) {
        this.setState({visible: true, data});

        // ~ 获取当前流程实例的节点列表 (包含过去, 当前和未来的)
        this.fetchTasksById(data.id)
    }

    fetchTasksById(instanceId: string) {
        send(URL.wholeTasks, null, [instanceId]).then(resp => {
            const httpCode = resp.data.httpCode;
            if (httpCode === 200) {
                const data = resp.data.data;
                this.setState({taskList: data}, () => this.setState({loading: false}));
            } else Handler.ofHttpWarn(httpCode)
        }).catch(Handler.ofError)
    }

    render() {
        const {visible, data, taskList, loading} = this.state;
        const histTask = taskList?.filter((task) => !task.isCurrent && !task.isFuture)
        const currTask = taskList?.filter((task) => task.isCurrent && !task.isFuture).at(0)
        const futureTask = taskList?.filter((task) => !task.isCurrent && task.isFuture)

        const instanceState = data?.instanceState ? data.instanceState : 0;
        const instanceStateName = data?.instanceStateName ? data.instanceStateName : '审批中';

        const startTask = histTask?.shift()

        // noinspection JSUnusedGlobalSymbols
        return (
            <>
                <Modal title="问卷详情" open={visible} centered keyboard width={"65%"} footer={null} onCancel={() => this.setState({visible: false})}>
                    <Descriptions bordered layout="vertical">
                        <Descriptions.Item label="问卷 ID">{data?.id}</Descriptions.Item>
                        <Descriptions.Item label="发起人">{data?.createBy}</Descriptions.Item>
                        <Descriptions.Item label="发起时间">{fmtDate(data?.createTime)}</Descriptions.Item>
                        <Descriptions.Item label={"流程节点（" + instanceStateName + "）"}>
                            <Timeline mode="alternate" pending={loading} style={{paddingTop: '20px'}}>
                                <Timeline.Item color={"green"} dot={<LazyIcon iconName="DownCircleOutlined"/>}>
                                    <Tag className={"tag"}><b>{startTask?.taskName}</b> - {fmtDate(startTask?.createTime)}</Tag>
                                </Timeline.Item>
                                {
                                    histTask?.map((item) => {
                                            const tag =
                                                <Tag className={"tag"}>
                                                    <b>{item.taskName}</b> - {fmtDate(item.createTime)}
                                                    {
                                                        (item.variable && item.variable.indexOf('x6Img') != -1) ?
                                                            <>
                                                                <Divider type={"vertical"}/>
                                                                <a onClick={() => this.imageDetailRef.current?.showImageDetail(item.variable)} className={"tag-link"} color={"blue"} href={"javascript:void(0);"}>查看架构图</a>
                                                            </> :
                                                            null
                                                    }
                                                    {!item.questionnaireConfig.question ? '' : <><br/>{item.questionnaireConfig.question}&nbsp;{item.answer != null ? <LazyIcon iconName="ArrowRightOutlined"/> : ""}&nbsp;{item.answer}</>}
                                                </Tag>
                                            return (
                                                <Timeline.Item color={"green"} key={item.taskName} dot={<LazyIcon iconName="CheckCircleOutlined"/>}>
                                                    {
                                                        !item.questionnaireConfig.question ?
                                                            tag :
                                                            <>
                                                                <Popover placement="top" title={"问题描述"} content={
                                                                    <>
                                                                        <b>问题提示词：</b>{item.questionnaireConfig.questionPrompt}
                                                                        {!item.questionnaireConfig.imgPrompt ? '' : <><br/><b>生图提示词：</b>{item.questionnaireConfig.imgPrompt}</>}
                                                                        {!item.questionnaireConfig.riskPrompt ? '' : <><br/><b>风险提示词：</b>{item.questionnaireConfig.riskPrompt}</>}
                                                                    </>
                                                                }>
                                                                    {tag}
                                                                </Popover>
                                                            </>
                                                    }
                                                </Timeline.Item>
                                            )
                                        }
                                    )
                                }
                                {
                                    instanceState != 0 ?
                                        (
                                            instanceState == 1
                                                ?
                                                <Timeline.Item color={"green"} dot={<LazyIcon iconName="DownCircleOutlined"/>}>
                                                    <Tag className={"tag"}>
                                                        <b>{instanceStateName}</b>
                                                    </Tag>
                                                </Timeline.Item>
                                                :
                                                <Timeline.Item color={"red"} dot={<LazyIcon iconName="CloseCircleOutlined"/>}>
                                                    <Tag className={"tag"}><b>{data?.instanceStateName}</b></Tag>
                                                </Timeline.Item>
                                        ) : ''
                                }
                                {
                                    instanceState == 0 && currTask ?
                                        <Timeline.Item key={currTask.taskName} color="red" dot={<LazyIcon iconName="LoadingOutlined"/>}>
                                            {
                                                currTask.questionnaireConfig.question ?
                                                    <>
                                                        <Popover placement="top" title={"问题描述"} content={
                                                            <>
                                                                <b>问题提示词：</b>{currTask.questionnaireConfig.questionPrompt}
                                                                {!currTask.questionnaireConfig.imgPrompt ? '' : <><br/><b>生图提示词：</b>{currTask.questionnaireConfig.imgPrompt}</>}
                                                                {!currTask.questionnaireConfig.riskPrompt ? '' : <><br/><b>风险提示词：</b>{currTask.questionnaireConfig.riskPrompt}</>}
                                                            </>
                                                        }>
                                                            <Tag className={"tag"}>
                                                                <b>{currTask.taskName}</b> - {fmtDate(currTask.createTime)}
                                                                <br/>{currTask.questionnaireConfig.question}
                                                            </Tag>
                                                        </Popover>
                                                    </>
                                                    :
                                                    <>
                                                        <Tag className={"tag"}><b>{currTask.taskName}</b> - {fmtDate(currTask.createTime)}</Tag>
                                                    </>
                                            }
                                        </Timeline.Item> : ''
                                }
                                {
                                    instanceState == 0 && futureTask?.map((item) => {
                                            return (
                                                <Timeline.Item key={item.taskName} dot={<LazyIcon iconName="ClockCircleOutlined"/>}>
                                                    {
                                                        item.questionnaireConfig ?
                                                            <>
                                                                <Popover placement="top" title={"问题描述"} content={
                                                                    <>
                                                                        <b>问题提示词：</b>{item.questionnaireConfig.questionPrompt}
                                                                        {!item.questionnaireConfig.imgPrompt ? '' : <><br/><b>生图提示词：</b>{item.questionnaireConfig.imgPrompt}</>}
                                                                        {!item.questionnaireConfig.riskPrompt ? '' : <><br/><b>风险提示词：</b>{item.questionnaireConfig.riskPrompt}</>}
                                                                    </>
                                                                }>
                                                                    <Tag className={"tag"}>
                                                                        <b>{item.taskName}</b>
                                                                        <br/>{item.questionnaireConfig?.question}
                                                                    </Tag>
                                                                </Popover>
                                                            </>
                                                            :
                                                            <>
                                                                <Tag className={"tag"}><b>{item.taskName}</b></Tag>
                                                            </>
                                                    }
                                                </Timeline.Item>
                                            )
                                        }
                                    )
                                }
                            </Timeline>
                        </Descriptions.Item>
                    </Descriptions>
                </Modal>

                <ImageDetail ref={this.imageDetailRef}/>
            </>
        )
    }
}

export default InstanceDetail;
